<template>
	<div class="npad-icon" @click="onClick()">
		<div class="icon-body" >
			<div class="icon" :class="props.icon"></div>
			<div class="app-icon-text" v-if="props.nameShow">{{ props.name }}</div>
		</div>
	</div>
</template>

<script setup>
	import {defineProps} from 'vue';
	import $store from '../store/index'
	const props = defineProps({
		id:String,
		icon:{
			type:String,
			default:""
		},
		name:String,
		size:{
			type:Number,
			default:90
		},
		nameShow: {
			type: Boolean,
			default: true
		}
	})
	const onClick = function(){
		$store.dispatch('core/openApplication',props.id)
	}
</script>

<style lang="less">
	.npad-icon {
		flex-wrap: nowrap;
		margin: 0px 15px;
	}
	.npad-icon:active {
		animation: heartBeat 2s;
	}
	.icon-body {
		border-radius: 4px;
	}
	.icon {
		height: 100px;
		width: 100px;
		margin: 0 auto;
		background-size: cover;
	}	
	.app-icon-text{
		min-height: 20px;
		line-height: 20px;
		text-align: center;
		margin:10px 0px;
		font-size: 20px;
		overflow: hidden;
		word-wrap: break-word;
		word-break: break-all;
		text-overflow: ellipsis;
		padding-bottom: 5px;
		color: #ffffff;
		text-shadow: 2px 2px 2px #000000;
	}
</style>